<template>
<form id="search">
  <span class="search">
  Search <input name="query" v-model="searchQuery">
  </span>
  <Living
    :data="gridData"
    :columns="gridColums"
    :filter-key="searchQuery"
  />
</form>
</template>

<script setup>
import Living from '../components/Grid.vue'
import { ref } from 'vue'
const searchQuery = ref('')
const gridColums = ['name','power']
const gridData = [
  { name: '罗洋洋', power: 1000 },
  { name: '张超杰', power: 1500 },
  { name: '喻洪', power: 1500 },
  { name: '王明登', power: 1500 }
]
</script>

<style scoped>
#search{
  line-height: 50px !important;
  display: flex;
  flex-direction: column;
}
</style>